<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Animated Counter in JS</title>
    <link rel="stylesheet"  href="../assets/css/animatedCounter.css">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
          integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="
          crossorigin="anonymous" />
  </head>
  <body>
    <header>
      <h1>Happy Coding !</h1>
    </header>
    <section class="counters">
      <div class="container">

        <div>
            <img src="https://media3.giphy.com/media/H8DuBFems6d7UDmamS/source.gif">
            <h2><button class="btn " onclick="start()"> start counting</button></h2>
            </div>
       
        
        <div>
          <i class="fab fa-youtube fa-4x"></i>
          <div class="counter" data-target = "600000">0</div>
          <h3>Subscribers</h3>
        </div>
        
        <div>
          <i class="fab fa-twitter fa-4x"></i>
          <div class="counter" data-target = "20000">0</div>
          <h3>Followers</h3>
        </div>
        
        <div>
          <i class="fab fa-instagram fa-4x"></i>
          <div class="counter" data-target = "3600000">0</div>
          <h3>Likes</h3>
        </div>
        
        <div>
          <i class="fab fa-linkedin fa-4x"></i>
          <div class="counter" data-target = "100000">0</div>
          <h3>Connections</h3>
        </div>
      
   
    </div>

    
   
    </section>

    <script src="../assets/js/animatedCounter.js"></script>
  </body>
</html>
